import React, { useState, useEffect } from 'react'
import { Button, Table, Modal, message, notification } from 'antd'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons'
import { getNews, delNews, updateNewsInfo } from '@api'

export default function NewsDraft(props) {
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  /*---------------------------------------定义state---------------------------------------------------------------------------*/
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <a href={`/news-manage/preview/${item.id}`}>{title}</a>
      }
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '分类',
      dataIndex: 'category',
      render: (category) => {
        return category.title
      }
    },
    {
      title: "操作",
      render: (item) => {
        return <div>
          <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => { props.history.push(`/news-manage/update/${item.id}`) }} />
          <Button danger shape="circle" icon={<DeleteOutlined />} onClick={() => { delThisRole(item) }} />
          <Button type="primary" shape="circle" icon={<UploadOutlined />} onClick={() => handleCheck(item.id)} />
        </div>
      }
    }
  ]
  // 列表内容
  const [dataSource, setdataSource] = useState([])
  // 用户信息
  const { username } = JSON.parse(localStorage.getItem("token"))
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  /*--------------------------------------hooks调用方法--------------------------------------------------------------------------*/
  useEffect(() => {
    get_draft_list()
  }, [])
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  /*---------------------------------------定义方法------------------------------------------------------------------------------*/
  // 获取草稿列表
  const get_draft_list = () => {
    getNews({
      author: username,
      auditState: 0,
      _expand: 'category'
    }).then((res) => {
      console.log(res.data);
      setdataSource(res.data)
    })
  }
  // 删除
  const delThisRole = (item) => {
    Modal.confirm({
      title: '确认删除这个吗',
      icon: <ExclamationCircleOutlined style={{ color: 'red' }} />,
      content: '注意：该操作无法撤回',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        delNews(item.id).then(() => {
          get_draft_list()
          message.success({
            content: '删除成功 ',
          })
        })
      }
    })
  }
  // 提交审核
  const handleCheck = (id) => {
    Modal.confirm({
      title: '确认提交审核这个吗',
      icon: <ExclamationCircleOutlined style={{ color: 'red' }} />,
      content: '注意：该操作无法撤回',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        updateNewsInfo({
          id,
          auditState: 1
        }).then(() => {
          props.history.push('/audit-manage/list')
          notification.info({
            message: `通知`,
            description:
              `您可以到${'审核列表'}中查看您的新闻`,
            placement: "bottomRight"
          });
        })
      }
    })
  }
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  /*-----------------------------------------------------jsx模板--------------------------------------------------------*/
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} />
    </div>
  )
}

